<template>
    <div class="container">
        <p class="oneP">招商加盟行业痛点</p>
        <p class="twoP" style="font-weight:100">移动互联网时代，企业招商痛点多多</p>
        <button class="oneButton" @click="$router.push({path:'/regist'})">立即注册</button>
        <ul>
            <li v-for="(item,index) in arr1" :key="index">
                <div class="left">
                    <img :src="item[0]">
                </div>
                <div class="right">
                    <p>{{item[1]}}</p>
                    <p>{{item[2]}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
require("../../assets/css/p.css")
const img1 = require("../../assets/img/切图/招商加盟/招商加盟行业痛点/LOGO.png")
const img2 = require("../../assets/img/切图/招商加盟/招商加盟行业痛点/LOGO1.png")
const img3 = require("../../assets/img/切图/招商加盟/招商加盟行业痛点/LOGO2.png")
const img4 = require("../../assets/img/切图/招商加盟/招商加盟行业痛点/LOGO3.png")
const img5 = require("../../assets/img/切图/招商加盟/招商加盟行业痛点/LOGO4.png")
export default {
    data(){
        return {
            arr1:[
                [img1,"缺策划","无工具"],
                [img2,"数据差","成本高"],
                [img3,"无技巧","转化低"],
                [img4,"效果差","难把控"],
                [img5,"弱营销","缺推广"]
            ]
        }
    }
}
</script>
<style scoped>
.container{
    width: 1200px;
    margin:0 auto;
    margin-top: 80px;
    text-align: center;
}
ul{
    margin-top: 60px;
    overflow: hidden;
    padding:7px;
}
ul li{
    width:216px;
    height: 121px;
    float:left;
    margin-left: 25px;
    background: url("../../assets/img/切图/招商加盟/招商加盟行业痛点/gb.png");
    box-shadow: 2px 2px 16px #ebebeb;
    
}
ul li:hover{
    /* border:1px solid red; */
     background: url("../../assets/img/切图/招商加盟/招商加盟行业痛点/bg.png") center;
}
ul li:first-child{
    margin-left: 0;
}
.left{
    float:left;
    width:127px;
    text-align: center;
    line-height: 121px;
    height: 121px;
}

.right{
    float: left;
    width:89px;
    height: 121px;
    text-align: left;
    z-index:3;
}
.right>p:nth-child(1){
    margin-top: 40px;
}
.right>p{
    font-size: 16px;
    color:rgb(34, 34, 34);
}

.oneButton {
    box-shadow: 0px 4px 19px #ed9191;
}
</style>